<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="text" name="name">
    <input type="number" name="age">
    <a href="https://stackoverflow.com/questions/1677990/what-is-the-difference-between-focus-and-active">What is the
        difference between :focus and :active? - Stack Overflow</a>
    <p contenteditable="true">Content Editable P tag will able to receive focus event</p>
    <br>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellat cum repudiandae numquam itaque perspiciatis
        sapiente esse tempora iste cupiditate eaque eos fugiat nostrum voluptate consequuntur, magnam quas at voluptatum
        sed!</p>

    <button>Click me</button>

    <script>
        setInterval(() => {
            console.log("currently active:", document.activeElement.tagName);
        }, 500);
        document.body.addEventListener("focusin", e => {
            const el = e.target;
            console.log(el.tagName);
        }, false)
    </script>
</body>

</html>